<template>
  <div class="layout">
    <baseContainer title="分栏间隔">
   <x-row tag="div" :gutter="20" justify="space-around">
    <x-col tag="span" :span="12">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="7">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="5">
      <div style="background:gray"></div>
    </x-col>
   </x-row>
  </baseContainer>
  <baseContainer title="基础布局">
    <x-row tag="div">
    <x-col tag="span" :span="24">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="12">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="12">
      <div style="background:#ddd"></div>
    </x-col>
    <x-col tag="span" :span="12">
      <div style="background:#ddd"></div>
    </x-col>
    <x-col tag="span" :span="5">
      <div style="background:#eee"></div>
    </x-col>
    <x-col tag="span" :span="7">
      <div style="background:gray"></div>
    </x-col>
   </x-row>
  </baseContainer>
  <baseContainer title="对其方式">
    <x-row tag="div" justify="space-around">
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
  </x-row>
  <!--  -->
  <x-row tag="div" justify="center">
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
  </x-row>
  <!--  -->
  <x-row tag="div" justify="end">
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
    <x-col tag="span" :span="6">
      <div style="background:gray"></div>
    </x-col>
  </x-row>
  </baseContainer>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import baseContainer from './baseContainer.vue'
export default defineComponent({
  components: {
    baseContainer
  },
  setup () {
    

    return {}
  }
})
</script>

<style lang="scss" scoped>
.x-col>div{
  height: 20px;
  border-radius: 3px;
  margin: 10px 0;
}
</style>